<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>回访</title>
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="./styles/vant.index.css" />
    <link rel="stylesheet" href="./styles/page.css" />
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="./js/vue.min.js"></script>
    <script src="./js/vant.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/api.js"></script>
    <script src="./js/rules.js"></script>
    <script src="./js/qs.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <template id="first" class="container">
      <!--表单填写-->
      <van-form ref="myform" style="padding-bottom:20px">
        <div class="header">
          <div class="headerTitle">
            <img src="./img/title.png" />
            <div>我们的服务怎么样？请给出中肯的评价哦！</div>
          </div>
          <img src="./img/23.png" class="headerImg" />
        </div>
        <div class="box">
          <div class="title">请填写相关信息</div>
          <van-cell-group>
            <van-cell title="" value="">
              <template #title
                ><div class="flex">
                  <span class="require_tip">*</span><span>响应及时性</span>
                </div></template
              >
              <van-rate
                v-model="timelinessresponse"
                allow-half
                :count="5"
                clearable
                touchable
                color="#fd771c"
                void-icon="star"
                void-color="#eee"
              />
            </van-cell>
          </van-cell-group>
          <van-cell-group>
            <van-cell title="" value="">
              <template #title
                ><div class="flex">
                  <span class="require_tip">*</span><span>处理结果</span>
                </div></template
              >
              <van-rate
                v-model="processresults"
                allow-half
                :count="5"
                clearable
                touchable
                color="#fd771c"
                void-icon="star"
                void-color="#eee"
              />
            </van-cell>
          </van-cell-group>
          <van-cell-group>
            <van-cell title="" value="">
              <template #title
                ><div class="flex">
                  <span class="require_tip">*</span><span>销售服务</span>
                </div></template
              >
              <van-rate
                v-model="salesservices"
                allow-half
                :count="5"
                clearable
                touchable
              />
            </van-cell>
          </van-cell-group>
          <van-cell-group>
            <van-cell title="" value="">
              <template #title
                ><div class="flex">
                  <span class="require_tip">*</span><span>产品质量</span>
                </div></template
              >
              <van-rate
                v-model="productquality"
                allow-half
                :count="5"
                clearable
                touchable
              />
            </van-cell>
          </van-cell-group>
          <van-cell-group>
            <van-cell title="" value="">
              <template #title
                ><div class="flex">
                  <span class="require_tip">*</span><span>物流</span>
                </div></template
              >
              <van-rate
                v-model="logistics"
                allow-half
                :count="5"
                clearable
                touchable
              />
            </van-cell>
          </van-cell-group>
          <van-cell-group>
            <van-cell title="" value="">
              <template #title
                ><div class="flex">
                  <span class="require_tip">*</span><span>包装</span>
                </div></template
              >
              <van-rate
                v-model="wrap"
                allow-half
                :count="5"
                clearable
                touchable
              />
            </van-cell>
          </van-cell-group>
          <van-cell-group>
            <van-cell title="" value="">
              <template #title
                ><div class="flex">
                  <span class="require_tip">*</span><span>交期</span>
                </div></template
              >
              <van-rate
                v-model="deliverytime"
                allow-half
                :count="5"
                clearable
                touchable
              />
            </van-cell>
          </van-cell-group>
          <van-cell-group>
            <van-cell title="" value="">
              <template #title
                ><div class="flex">
                  <span class="require_tip">*</span><span>整体满意度</span>
                </div></template
              >
              <van-rate
                v-model="overallsatisfaction"
                allow-half
                :count="5"
                clearable
                touchable
              />
            </van-cell>
          </van-cell-group>
        </div>
        <!-- 按钮 -->
        <div class="btn-group">
          <div class="resetting" @click="resetting">重置</div>
          <div class="submit" v-if="!submiting" @click="submitData">提交</div>
          <div class="submit opacity" v-else>提交</div>
        </div>
      </van-form>
    </template>

    <script>
      let vm = new Vue({
        el: '#app',
        template: '#first',
        data: {
          Id: '',
          timelinessresponse: '',
          processresults: '',
          salesservices: '',
          productquality: '',
          logistics: '',
          wrap: '',
          deliverytime: '',
          overallsatisfaction: '',
          submiting: false
        },
        created: async function () {
          var id = this.getId()
          this.Id = id
        },
        methods: {
          getId () {
            var url = location.href
            var campaignId = getQueryString('id', location.href)
            return campaignId
          },
          /**
           * 提交数据
           */
          async submitData () {
            this.$refs.myform
              .validate()
              .then(() => {
                this.submiting = true
                var data = {
                  Id: this.Id,
                  timelinessresponse: Number(this.timelinessresponse),
                  processresults: Number(this.processresults),
                  salesservices: Number(this.salesservices),
                  productquality: Number(this.productquality),
                  logistics: Number(this.logistics),
                  wrap: Number(this.wrap),
                  deliverytime: Number(this.deliverytime),
                  overallsatisfaction: Number(this.overallsatisfaction)
                }
                axios({
                  url: `/${Api.ADD_RECORD}`,
                  method: 'post',
                  baseURL: `${Api.API_URL}`,
                  data: data
                })
                  .then(res => {
                    var data = res.data
                    if (data.IsSuccess) {
                      this.submiting = false
                      window.location.href = './success.html'
                    } else {
                      vant.Toast.fail(data.ErrorMessage, 2)
                      this.submiting = false
                      setTimeout(() => {
                        window.location.href = './fail.html'
                      }, 2000)
                    }
                  })
                  .catch(err => {
                    vant.Toast.fail(`提交失败`, 2)
                    this.submiting = false
                    setTimeout(() => {
                      window.location.href = './fail.html'
                    }, 2000)
                  })
              })
              .catch(err => {
                console.log('err', err)
              })
          },
          resetting () {
            this.timelinessresponse = ''
            this.processresults = ''
            this.salesservices = ''
            this.productquality = ''
            this.logistics = ''
            this.wrap = ''
            this.deliverytime = ''
            this.overallsatisfaction = ''
            this.submiting = false
          }
        }
      })
    </script>
  </body>
</html>
